<!--饼图-->
<template>
    <div class='container'>
        <div id="pieChartDiv"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { autoToolTip } from "@/utils/echartsAutoTooltip.js";
export default {
    name: '',
    components: {},
    props: {
        dataVColor: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            pieChart: "",
            //图表数据
            chartData: {
                seriesData: [
                    { value: 880, name: '配网数据采集' },
                    { value: 342, name: '激光点云巡检' },
                    { value: 1165, name: '精细化巡检' },
                    { value: 635, name: '红外巡检' },
                ]
            }
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {

        async createPieChart(pieData) {
            this.chartData.seriesData[0].value = pieData[0];
            this.chartData.seriesData[1].value = pieData[1];
            this.chartData.seriesData[2].value = pieData[2];
            this.chartData.seriesData[3].value = pieData[3];
            let { chartData } = this;//获取图表数据
            await (this.pieChart && this.pieChart.dispose());//若之前有，则销毁实例
            this.pieChart = echarts.init(document.getElementById('pieChartDiv'));//初始化echarts
            let option = {
                title: {
                    text: '任务类型占比',
                    top: "5%",
                    left: 'center',
                    textStyle: {
                        color: "#fff"
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        animationDuration: 3000,
                        radius:"60%",
                        animationEasing: "cubicInOut",
                        center: ["50%", "60%"],//饼图位置
                        label: {
                            color: "#fff"
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        data: [],

                    }
                ]
            };
            chartData.seriesData.forEach(s => {
                option.series[0].data.push(
                    {
                        value: s.value,
                        name: s.name,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                                {
                                    offset: 0,
                                    color: this.dataVColor[0]
                                },
                                {
                                    offset: 1,
                                    color: "#fff"
                                }
                            ])
                        }
                    }
                )
            });
            await (option && this.pieChart.setOption(option));//设置数据
            // 自动轮播
            autoToolTip(this.pieChart, option, {
                interval: 2000,// 轮播间隔时间 默认2s
                loopSeries: false,// 是否循环轮播所有序列
                seriesIndex: 0,// 第1个被轮播的序列下标
            });
        },
    },
};
</script>
<style scoped lang='scss'>
.container {
    height: 100%;
    width: 100%;

    #pieChartDiv {
        height: 100%;
        width: 100%;
    }
}
</style>